<template>
    <div style="display: flex;width: 100%;height: 100vh; background-color: black;">
        <!-- 左边 -->
        <div style="width: 50%;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <W网页和代码基础 :代码="代码" :访问路径="访问路径" :组件名="组件名"/>
        </div>
        <!-- 右边 -->
        <div style="width: 50%;background-color: rgba(25, 8, 36, 0.521);color: aliceblue; min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 80px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="组件修改">刷新组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 类型 -->
                    <div :style='样式1'>
                        <h4>类型 : </h4>
                        <spen :style='样式2'>英:type,类型:enum,默认:default</spen> <br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'>
                        <el-radio-group v-model="属性.type" size='small'>
                            <el-radio label=primary>正常 primary</el-radio>
                            <el-radio label="success">成功 success</el-radio>
                            <el-radio label="warning">警告 warning</el-radio>
                            <el-radio label="danger">危险 danger</el-radio>
                            <el-radio label="info">信息 info</el-radio>
                            <el-radio label="text">文本 text</el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 是否下划线 -->
                    <div :style='样式1'>
                        <h4>是否下划线 : </h4>
                        <spen :style='样式2'>英:underline,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'>
                        <el-radio-group v-model="属性.underline" size='small'>
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 是否禁用状态 -->
                    <div :style='样式1'>
                        <h4>是否禁用状态 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'>
                        <el-radio-group v-model="属性.disabled" size='small'>
                            <el-radio :label=true>是 true</el-radio>
                            <el-radio :label=false>否 false</el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 原生 href 属性 -->
                    <div :style='样式1'>
                        <h4>原生 href 属性 : </h4>
                        <spen :style='样式2'>英:href,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'>
                        <el-radio-group v-model='属性.href' size='small'>
                            <el-radio label="https://element-plus.org">有链接 </el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 图标组件 -->
                    <div :style='样式1'>
                        <h4>图标组件 : </h4>
                        <spen :style='样式2'>英:icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'>
                        <el-radio-group v-model="属性.icon" size='small'>
                            <el-radio label="Edit"><el-button size="small" :icon="Edit">编辑</el-button></el-radio>
                            <el-radio label="Share"><el-button size="small" :icon="Share">共享</el-button></el-radio>
                            <el-radio label="Search"><el-button size="small" :icon="Search">搜索</el-button></el-radio>
                            <el-radio label="Delete"><el-button size="small" :icon="Delete">删除</el-button></el-radio>
                            <el-radio label="Upload"><el-button size="small" :icon="Upload">下载</el-button></el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group>
                    </div>
                    <!-- 网页跳转方式 -->
                    <div :style='样式1'>
                        <h4>网页跳转方式 : </h4>
                        <spen :style='样式2'>英:target,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'>
                        <el-radio-group v-model="属性.target" size='small'>
                            <el-radio label="_blank">跳转新窗口 </el-radio>
                            <el-radio label="">当前窗口打开 </el-radio>
                        </el-radio-group>
                    </div>
                </el-scrollbar>

            </div>
        </div>

    </div>
</template>
<script setup>
import W网页和代码基础 from "../网页和代码基础.vue"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 路由 = proxy.router
const 库 = proxy.lib
const API = proxy.API
const 组件名 = ref('链接')
const 属性 = ref({
    type: '',//类型
    underline: '',//是否下划线
    disabled: '',//是否禁用状态
    href: '',//原生 href 属性
    icon: '',//图标组件
    target:'',//网页跳转方式


})

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 10px;font-size: 14px;')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')

const 删除颜色 = () => {
    属性.value.color = ""
}

const 代码 = ref('')
const 访问路径 = ref('http://localhost:3000/#/golink')

const 组件修改 = async () => {
    访问路径.value = ""
    let 结果 = await API.组件修改(组件名.value, 属性.value, "", "")
    if (结果.err == 'ok') {
        代码.value = 结果.msg
        访问路径.value = 结果.url
        console.log("访问路径", 访问路径.value)
        ElMessage.success("修改成功")
    } else {
        访问路径.value = 结果.url
        ElMessage.error("错误:" + 结果.err)
    }

}




// const 按钮模板 =proxy.lib.按钮膜拜

</script>
<style lang="scss"  scoped>
h4 {
    background-color: rgb(65, 104, 75);
    text-align: center;
}
</style>
